<template>
    <view class="found">
        <view class="site" @click="get_address">
            <view class="site_wrap" v-if="list.length !== 0">
                <u-icon name="map" color="#909196" size="24"></u-icon>
                <view class="site_contner">
                    <view><text class="site_name">{{ addrress.name }}</text><text class="site_Tal">{{ addrress.tel }}</text>
                    </view>
                    <view class="site_site">{{ addrress.addr_text }}</view>
                </view>
                <u-icon name="arrow-right" color="#909196" size="24"></u-icon>
            </view>
            <view class="hide" v-else>
                <u-icon name="map" color="#909196" size="24"></u-icon>
                <view class="title">请选取收货地址</view>
                <u-icon name="arrow-right" color="#909196" size="24"></u-icon>

            </view>
            <image class="a-bg"
                src="">
            </image>
        </view>
        <view class="order_particulars" v-for="(item, index) in goods" :key="index">
            <view class="thumb_varchar">
                <image :src="item.img" mode="scaleToFill" />
            </view>
            <view class="commodity_contenr">
                <view class="conmmodity_name">{{ item.name }}</view>
                <view class="spec">{{ item.attr }}</view>
                <view class="wrap_price_count">
                    <text class="price">￥{{ item.price }}</text>
                    <text class="count">x{{ item.num }}</text>
                </view>
            </view>
        </view>
        <view class="commmodity_message">
            <view class="plate_wrap">
                <view class="plate">
                    <text class="name">商品金额</text>
                    <text class="plate_contner">
                        ￥{{ totalmem }}
                    </text>
                </view>
                <view class="plate">
                    <text class="name">优惠金额</text><text class="plate_contner plate_act">无优惠</text>
                </view>
                <view class="plate">
                    <text class="name">运费</text><text class="plate_contner">免运费</text>
                </view>
                <view class="plate">
                    <text class="name">备注</text>
                    <input class="input" v-model="desc" type="text" placeholder="请填写备注信息">
                </view>
            </view>

        </view>
        <view class="footer">
            <view class="actual_payment"><text class="title">实付款</text>
                <text class="total_price">￥{{ totalmem }}</text>
            </view>
            <view class="submit" @click="submitA">提交订单</view>
        </view>
    </view>
</template>

<script>
import BigNumber from 'bignumber.js';

import { get_order_checkOrde, get_default_addr, get_order_submitOrde } from '../../api/order'
export default {
    data() {
        return {
            cart_id: '',
            uid: uni.getStorageSync('uid'),
            type: '',
            token: uni.getStorageSync('token'),
            goods: [],
            addrress: [],
            list: [],
            desc: '',
        }
    },
    computed: {
        //合计
        totalmem() {
            if (this.list.goods == 0) return 0
            return this.goods.reduce((current, v) => {

                current = new BigNumber(v.price).times(v.num).plus(current);
                current = current.toString() - 0;

                return current;
            }, 0);

        }
    },
    onLoad(options) {

        this.cart_id = options.cart_id
        this.type = options.buy
    },
    mounted() {
        //确认订单信息
        get_order_checkOrde({
            uid: this.uid,
            cart_id: this.cart_id,
        }, { token: uni.getStorageSync("token") }).then(res => {
            console.log(res)
            this.goods = res.data.goods
        })
        //获取默认收货地址
        get_default_addr({
            uid: this.uid,
        }, { token: uni.getStorageSync('token') }).then(res => {
            console.log(res)
            this.list = res.data
            this.addrress = res.data[0]
        })
    },
    methods: {
        //去往添加地址页
        get_address() {
            uni.navigateTo({ url: '/pages/address/address' })
        },
        //提交订单
        submitA() {
            get_order_submitOrde({
                uid: this.uid,
                cart_id: this.cart_id,
                desc: this.desc,
                address: this.address
            }, { token: uni.getStorageSync('token') }).then(res => {
                console.log(res)
                let orderId = res.data
                let totalmem = this.totalmem
                console.log(totalmem)
                if (res.code == 1) {
                    uni.navigateTo({ url: '/pages/money/pay?orderId=' + orderId + '&totalmem=' + totalmem })
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.found {
    width: 100%;

    .site {
        width: 100%;
        height: 80px;
        background-color: #fff;
        position: relative;

        .site_wrap {
            display: flex;
            justify-content: space-around;
            align-items: center;

            .site_contner {
                .site_name {
                    font-size: 18px;
                    font-weight: 500;

                }

                .site_Tal {
                    font-size: 14px;
                    margin-left: 10px;
                }

                .site_site {
                    font-size: 14px;
                    margin-top: 10px;
                    color: #939aa4;
                }
            }

            image {
                width: 15px;
                height: 15px;
            }
        }

        .hide {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .title {
                width: 80%;
            }
        }

        .a-bg {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 100%;
            height: 5upx;
        }
    }

    .order_particulars {
        width: 100%;
        height: 150px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;

        .thumb_varchar {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
                width: 110px;
                height: 120px;
            }
        }

        .commodity_contenr {
            width: 70%;
            padding-right: 20px;

            .conmmodity_name {
                margin-top: 15px;
                font-weight: 500;
                font-size: 18px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
            }

            .spec {
                font-size: 14px;
                color: #939aa4;
                margin-top: 10px;

            }

            .wrap_price_count {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;

                .price {
                    color: #fddc34;
                }

                .count {
                    font-size: 14px;

                }
            }
        }

    }

    .commmodity_message {
        width: 100%;
        background-color: #fff;
        margin-top: 15px;

        .plate_wrap {
            width: 90%;
            margin: 0 auto;

            .plate {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #eeeff0;

                .name {
                    color: #939aa4;
                }

                .plate_act {
                    color: #fddc34;
                }

                .input {
                    width: 80%;
                }
            }
        }
    }

    .footer {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: 0;

        .actual_payment {
            width: 65%;
            height: 100%;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            .title {
                color: #696b6c;
                font-size: 22px;
            }

            .total_price {
                font-size: 22px;
                color: #fdd100;
            }
        }

        .submit {
            width: 35%;
            height: 50px;
            background-color: #fdd100;
            color: #fff;
            font-size: 22px;
            text-align: center;
            line-height: 50px;

        }
    }

}
</style>